import { defineComponent, PropType } from 'vue';
import { FormOptions } from './types';
import useModule from './form.module';

export default defineComponent({
  name: 'Form',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    header: {
      type: Array as PropType<FormOptions[]>,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    /** 表单大小 */
    size: {
      type: String as PropType<'medium' | 'small' | 'mini'>,
      default: 'small'
    }
  },
  setup(props, { emit }) {
    const { methods } = useModule(props, emit);
    return () => (
      <el-form
        rules={props.rules}
        props={{
          model: props.formData
        }}
        label-width={props.labelWidth}
        size={props.size}
      >
        {props.header.map((item) => {
          return item.mode === 'split' ? (
            <div class='dash-line' />
          ) : (
            !item.hidden && (
              <el-form-item label={item.label} prop={item.prop}>
                {(() => {
                  switch (item.mode) {
                    case 'input':
                      return (
                        <el-input
                          disabled={item.disabled}
                          v-model={props.formData[item.prop]}
                        />
                      );
                    case 'radio':
                      return (
                        <el-radio-group
                          v-model={props.formData[item.prop]}
                          onChange={() =>
                            methods.handleChange(
                              props.formData[item.prop],
                              item
                            )
                          }
                        >
                          {item.selects.map((item1) => {
                            return (
                              <el-radio
                                key={item1.id}
                                label={item1.id}
                                value={item1.id}
                              >
                                {item1.label}
                              </el-radio>
                            );
                          })}
                        </el-radio-group>
                      );
                    default:
                      return (
                        <el-select
                          v-model={props.formData[item.prop]}
                          multiple={item.mode !== 'singleSelect'}
                          onChange={() =>
                            methods.handleChange(props.formData[item.prop], item)
                          }
                        >
                          {item.selects.map((item1) => {
                            return (
                              <el-option
                                key={item1.id}
                                label={item1.label}
                                value={item1.id}
                              />
                            );
                          })}
                        </el-select>
                      );
                  }
                })()}
              </el-form-item>
            )
          );
        })}
      </el-form>
    );
  }
});
